<%--
  Created by IntelliJ IDEA.
  User: zzf
  Date: 2021/1/7
  Time: 19:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/public/header/permissionCommon.jspf" %>

<html>
<head>
    <title>街镇服务统计</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 头部和左侧导航-->
    <div id="header"></div>

    <!--右侧主体区域-->
    <div class="layui-body" >
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">街镇服务统计</li>
                <li>可控范围表</li>
            </ul>
            <div class="layui-tab-content">
                <%--街镇服务机构统计--%>
                <div id="JZFWTJ" class="layui-tab-item layui-show">

                    <form id="total" class="layui-form layui-form-pane" method="post"
                          style="margin-top: 20px;">
                        <div class="layui-form-item" style="width:100%">
                            <div class="layui-inline">
                                <label class="layui-form-label" >服务机构</label>
                                <div class="layui-input-inline">
                                    <select name="department_name" id="department_name" lay-filter="department_name"  class="select">
                                        <option value="">请选择服务机构</option>
                                        <option value="嘉定护理站一号">嘉定护理站一号</option>
                                        <option value="嘉定护理站二号">嘉定护理站二号</option>
                                        <option value="嘉定护理站三号">嘉定护理站三号</option>
                                        <option value="嘉定护理站四号">嘉定护理站四号</option>
                                        <option value="嘉定护理站五号">嘉定护理站五号</option>
                                        <option value="嘉定护理站六号">嘉定护理站六号</option>
                                        <option value="于勤护理站一号">于勤护理站一号</option>
                                        <option value="于勤护理站二号">于勤护理站二号</option>

                                    </select>
                                </div>
                                <button class="layui-btn" lay-submit lay-filter="searchForApart" style="width: auto">
                                    <i class="layui-icon">&#xe615;</i>查询
                                </button>
                            </div>
                        </div>
                    </form>

                    <table id="FWJGList" lay-filter ="FWJGList"></table>
                    <script type="text/html" id="Del2">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del2">删除</a>
                    </script>
                </div>

                <%--可控范围表--%>
                <div id="KKFWB" class="layui-tab-item ">
                                            <%--搜索--%>
                    <form id="userSearch" class="layui-form layui-form-pane " method="post"
                          style="font-size: small">
                        <div class="layui-form-item " >
                            <div class="layui-inline">
                                <label class="layui-form-label" >片区</label>
                                <div class="layui-input-inline">
                                    <select name="kkfw_section" id="kkfw_section" lay-filter="kkfw_section"  class="select">
                                        <option value="">请选择片区</option>
                                        <option value="东片区">东片区</option>
                                        <option value="南片区">南片区</option>
                                        <option value="西片区">西片区</option>
                                        <option value="北片区">北片区</option>
                                        <option value="中片区">中片区</option>
                                    </select>
                                </div>
                                <button  class="layui-btn" lay-submit lay-filter="submitSearch" style="width: auto">
                                    <i class="layui-icon">&#xe615;</i>查询</button>
                            </div>
                        </div>
                    </form>

                    <button class="layui-btn layui-btn-sm" data-type="import" id="importData" >导入</button>
                    <button id="export" class="layui-btn layui-btn-sm" onclick="outputFile()">
                        <i class="layui-icon layui-icon-export"></i>导出</button>

                                    <%--信息展示--%>
                    <table id="KKFWBList" lay-filter="KKFWBList"></table>

                    <script type="text/html" id="Edit_Del">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>


        </div>
    </div>

    <!--底部-->
    <div id="footer"></div>
    <script src="${webPath}/js/permission/auth/permList.js"></script>
    <script>
        $("#header").load("${webPath}/publicPages/permission/fragments/header.jsp");
        $("#footer").load("${webPath}/publicPages/permission/fragments/footer.jsp");
    </script>
</div>



<%--街镇服务统计--%>
<script type="text/javascript" src="${webPath}/js/jzfwtj/JGFWTJInfo.js"></script>

        <%--——-——————可控范围表修改弹出层————————--%>
<script type="text/javascript" src="${webPath}/js/utils.js"></script>
<div class="editKkfw" id="KkfwEdit" lay-filter="KkfwEdit" style="display: none;">
    <form class="layui-form layui-form-pane" style="margin-top: 20px;margin-left: 10px;margin-right: 10px;">

        <div class="layui-form-item"  style="display: none">
                <label class="layui-form-label">序号</label>
                <div class="layui-input-block">

                    <input type="text" name="id" value={id} class="layui-input" readonly="readonly">
                </div>
            </div>
        <div class="layui-form-item">
                <label class="layui-form-label" >片区</label>
                <div class="layui-input-block">
                    <input type="text" name="kkfw_section" value={kkfw_section} class="layui-input">
                </div>
        </div>
        <div class="layui-form-item">
                <label class="layui-form-label">服务区域</label>
                <div class="layui-input-block">
                    <input type="text" name="kkfw_area" value={kkfw_area} class="layui-input">
                </div>
        </div>
        <div class="layui-form-item">
                <label class="layui-form-label">服务机构</label>
                <div class="layui-input-block">
                    <input type="text" name="kkfw_apartment" value={kkfw_apartment} class="layui-input">
                </div>
        </div>
        <div class="layui-form-item" align="center" style="margin-top: 20px;margin-bottom: 20px">
            <button type="submit" class="layui-btn" lay-submit lay-filter="submitEdit">立即提交</button>
        </div>

    </form>
</div>



<%--可控范围表修改/查询/新增提交--%>
<script>
    layui.use(['form','table'], function(){
        var form = layui.form;
            table =layui.table;

        form.on('submit(submitEdit)', function(data){
            console.log("开始提交");
            console.log(data.field);
            $.ajax({
                url:'/JZFWTJ/updateKkfwb',
                method:'POST',
                data:data.field,
                dataType:'JSON',
                success:function(){

                    console.log("成功提交")
                    layer.msg("提交成功",{icon: 1, time: 1500},function() {
                        location.reload();
                    }); //提交成功后刷新页面

                },
                error:function (data) {
                    console.log("提交失败",data);
                    console.log("表单提交错误");
                }
            });
            return false;
        });

        form.on('submit(submitSearch)',function(data){
            console.log(data.field);

            $.ajax({
                url:"/JZFWTJ/findBySection",
                data:data.field,
                request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'limit' //每页数据量的参数名，默认：limit
                },
                type:"POST",
                success:function(data){
                    console.log("xxxxxx",data);
                    console.log(data);
                    table.reload('KKFWBList',{
                        url:"",
                        data:data,
                        done: function(){
                            console.log("完成")
                        }
                    })
                },//ajax的使用，点击submit即可跳转到controller处寻找url完成功能

            })
            return false;
        });
    })
</script>
<%--可控范围表 删除修改--%>
<script>
    layui.use(['upload', 'table','layer'],function() {
        var $ = layui.jquery,
            upload = layui.upload,
            table = layui.table;
            layer = layui.layer,

        <%------------------- 信息显示------------------%>
        table.render({
            elem: '#KKFWBList'
            , url: '/JZFWTJ/getAllList'
            , method: 'post'
            , id: 'KKFWBList'
            , cellMinWidth: 80
            , height: 500 //容器高度
            // , toolbar: true //开启头部工具栏，并为其绑定左侧模板
            , request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'limit' //每页数据量的参数名，默认：limit
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": '', //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.list, //解析数据列表
                }
            }
            , cols: [[ //表头
                {type: 'checkbox'}
                , {field: 'kkfw_section', title: '片区', width: 100}
                , {field: 'kkfw_area', title: '服务区域', width: 300}
                , {field: 'kkfw_apartment', title: '服务机构', width: 570}
                , {toolbar: '#Edit_Del', width: 170, title: '操作', fixed: 'right'}
            ]]
            , done: function (res) {
                console.log(res);
            }
            , page: true
        });

        // 信息编辑删除功能
        table.on('tool(KKFWBList)', function (obj) {
            var data = obj.data;
            console.log(data);
            console.log(data.id);
            var data3 = $('#KkfwEdit')[0].innerHTML.format(data);
            console.log(data3);
            if (obj.event === 'del') {
                layer.confirm('确认删除？', function (index) {
                    $.ajax({
                        url: '/JZFWTJ/delKkfwb',
                        method: 'post',
                        data: {id: data.id},
                        success: function () {
                            obj.del();
                            layer.close(index);
                        },
                        error: function () {
                            layer.msg("删除出错")
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                console.log("修改");
                layer.open({
                    type: 1,
                    skin: 'layui-layer-demo', //样式类名
                    content: data3,
                    area: ["600px", "400px"],
                    title: ['修改信息'],
                    closeBtn: 1,
                    shadeClose: true,
                    btn: ["关闭"]
                });
            }


        });



        <%------------------- 文件上传------------------%>
        upload.render({
            elem: "#importData",//导入id
            url: "/JZFWTJ/uploadFile",
            accept: "file",
            exts: 'xls|xlsx|xlsm|xlt|xltx|xltm',
            done: function(res){
            console.log("进入done");
            console.log(res.msg);
            if(res.msg=="ok"){
                layer.msg("文件导入成功",{icon: 1, time: 1500},function(){location.reload();});
                // alert("文件导入成功");
            }else{
                // layer.msg("文件导入失败",{icon: 2, time: 1500},function(){location.reload();});
                alert("文件导入失败失败");
            }
            }
        });

    })
</script>
<%-------------可控范围表文件导出---------------%>
<script type="text/javascript">
    function outputFile() {
        window.location.href = "/JZFWTJ/outputFile";
    }
</script>



</body>
</html>
